<template>
  <div class="bim-viewer-container">
    <!-- BIM模型控制栏 -->
    <div class="bim-controls">
      <h2 class="bim-title">6楼BIM模型实时监控</h2>
      
      <div class="view-controls">
        <button 
          class="view-button" 
          :class="{ active: viewMode === '2d' }"
          @click="setViewMode('2d')"
        >
          <el-icon><Grid /></el-icon>
          2D视图
        </button>
        
        <button 
          class="view-button active" 
          :class="{ active: viewMode === '3d' }"
          @click="setViewMode('3d')"
        >
          <el-icon><Box /></el-icon>
          3D视图
        </button>
        
        <button class="tool-button" @click="resetView">
          <el-icon><Refresh /></el-icon>
        </button>
        
        <button class="tool-button" @click="toggleFullscreen">
          <el-icon><FullScreen /></el-icon>
        </button>
      </div>
    </div>
    
    <!-- BIM模型渲染区域 -->
    <div class="bim-model-area" ref="modelContainer">
      <!-- UE 像素流 -->
      <div class="model-background">
        <video id="peer-stream" is="peer-stream"></video>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Grid, Box, Refresh, FullScreen } from '@element-plus/icons-vue'
import { loadSceneConfig, getBIMSceneConfig } from '@/utils/configLoader'
import '@/utils/peer-stream'

const modelContainer = ref(null)
const viewMode = ref('3d')
const showPath = ref(true)

const robotData = reactive({
  x: 688,
  y: 363,
  status: '移动中',
  battery: 85,
  speed: 1.2
})

const robotPosition = ref({
  left: '688px',
  top: '363px'
})

const pathData = ref('M 100 400 Q 300 200 500 350 T 688 363')

const setViewMode = (mode) => {
  viewMode.value = mode
}

const resetView = () => {
  // 重置视图逻辑
  console.log('重置视图')
}

const toggleFullscreen = () => {
  // 全屏切换逻辑
  if (document.fullscreenElement) {
    document.exitFullscreen()
  } else {
    modelContainer.value?.requestFullscreen()
  }
}

// 模拟机器狗位置更新
const updateRobotPosition = () => {
  // 这里可以接收WebSocket数据更新机器狗位置
  robotPosition.value = {
    left: robotData.x + 'px',
    top: robotData.y + 'px'
  }
}

onMounted(() => {
  // 配置已经在 main.js 中预加载，直接使用
  const bimConfig = getBIMSceneConfig()
  console.log('BIM场景配置:', bimConfig)
  
  // 初始化机器狗位置
  updateRobotPosition()
  
  // 模拟实时位置更新
  setInterval(() => {
    robotData.x += Math.random() * 4 - 2
    robotData.y += Math.random() * 4 - 2
    updateRobotPosition()
  }, 2000)
  
  console.log('BIM模型查看器初始化完成')
})
</script>

<style scoped>
.bim-viewer-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #061325;
}

.bim-controls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: var(--secondary-bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
  z-index: 5;
}

.bim-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1;
}

.view-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.view-button {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  background: var(--accent-bg);
  border: none;
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
  line-height: 1;
}

.view-button.active {
  background: var(--secondary-blue);
  color: var(--text-primary);
}

.view-button:hover:not(.active) {
  background: var(--secondary-bg);
}

.tool-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--accent-bg);
  border: none;
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 12px;
}

.tool-button:hover {
  background: var(--secondary-bg);
  color: var(--primary-blue);
}

.bim-model-area {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.model-background {
  width: 100%;
  height: 100%;
  position: relative;
}

.background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.robot-dot {
  width: 32px;
  height: 32px;
  background: #EF4444;
  border-radius: 50%;
  position: relative;
  animation: pulse 2s infinite;
}

.robot-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.robot-info {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  color: white;
}

.coordinates {
  font-weight: bold;
}

.status {
  color: var(--success-green);
}

.path-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}


#peer-stream {
  display: flex;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

</style>